<template>
  <div>
    <!--    编写页面静态部分，即view部分-->

    <!--查询表单-->
    <el-form :model="params" style="padding-top: 10px">
      角色名称:
      <el-input v-model="params.roleName" style="width:150px"></el-input>
      <el-button type="primary" v-on:click="query" size="small">查询</el-button>
      <!--vue渲染的a标签,:to标签指定访问的url，query指定url带的参数-->
      <router-link class="mui-tab-item"
                   :to="{path:'/system/role/add',query:{page:this.params.page}}">
        <el-button type="primary" size="small">新增</el-button>
      </router-link>
    </el-form>

    <!--表格加载-->
    <el-table :data="roleList" style="width: 100%">   <!--绑定表格数据list,:是v-bind的简写-->
      <el-table-column type="index" width="70">
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="150">
      </el-table-column>
      <el-table-column prop="roleCode" label="角色代码" width="150">
      </el-table-column>
      <el-table-column prop="description" label="描述" width="200">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200" :formatter="dateFormat">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="template">
          <el-button size="small" type="text" @click="setMenu(template.row.id)">授权</el-button>
          <el-button size="small" type="text" @click="edit(template.row.id)">编辑</el-button>
          <el-button size="small" type="text" @click="del(template.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="changeSize"
      @current-change="changePage"
      :current-page="params.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="params.size"
      layout="total, sizes, prev, pager, next"
      :total="total"
      style="float:right">
    </el-pagination>

    <!--    v-on: 简写 @  v-bind 简写 ：          -->
  </div>
</template>

<script>
    /*编写页面静态部分，即model及vm部分。*/
    //导入接口api中的所有接口
    import * as userApi from '../api/user'

    //导出默认的VM
    export default {
        //View层数据的加载，即为Model层
        data() {
            return {
                roleList: [],
                total: 0,
                //查询条件参数
                params: {
                    page: 1,            //设置页码
                    size: 10,           //设置每页展示数据个数
                    roleName: '',
                }
            }
        },
        //View层调用方法的实现
        methods: {
            //时间格式化
            dateFormat:function(row,column){
                var t=new Date(row.createTime);//row 表示一行数据, updateTime 表示要格式化的字段名称
                return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()+" "+t.getHours()+":"+t.getMinutes()+":"+t.getSeconds();
            },
            //分页查询方法
            query: function () {
                //调用导入的cmsApi接口里的方法获取数据
                userApi.role_list(this.params.page, this.params.size, this.params.roleName).then((res) => {
                    if (res.success) {
                        //ajax请求成功之后的回调方法,为参数赋值
                        this.roleList = res.queryResult.list;
                        this.total = res.queryResult.total
                    } else {
                        if (res.message) {
                            this.$message.error(res.message);
                        } else {
                            this.$message.error('提交失败');
                        }
                    }
                })
            },
            //页码改变调用该方法
            changePage: function (page) {
                //更改页码
                this.params.page = page;
                this.query();
            },
            //每页显示数据改变调用方法
            changeSize: function (size) {
                //更改页面显示数据
                this.params.size = size;
                this.query();
            },
            //授权
            setMenu: function (roleId) {
                //设置路由
                this.$router.push({
                    path: '/system/role/menu' + roleId,
                    //设置路由携带的参数，实现修改页面的返回
                    query: {
                        page: this.params.page,
                    }
                });
            },
            //编辑按钮调用的方法
            edit: function (roleId) {
                //设置路由
                this.$router.push({
                    path: '/system/role/edit' + roleId,
                    //设置路由携带的参数，实现修改页面的返回
                    query: {
                        page: this.params.page,
                    }
                });
            },
            //删除按钮调用的方法
            del: function (roleId) {
                this.$confirm('确认删除此角色吗？', '提示', {}).then(() => {
                    userApi.role_delete(roleId).then((res) => {
                        if (res.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            //删除成功之后调用查询方法，重新加载表格数据
                            this.query();
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    });
                });
            },
        },
        //使用钩子方法,实现页面加载完成但是未开始渲染时调用方法
        created() {
            //从url中获取参数page，在页面加载时赋值，若值为空，默认赋值为1
            this.params.page = Number.parseInt(this.$route.query.page || 1);
        },
        //使用钩子方法,实现页面渲染完成之后调用方法
        mounted() {
            //mounted()方法是在dom元素渲染完成之后，调用query()方法
            this.query();
        }
    }
</script>

<style>
  /*编写页面样式，不是必须*/
</style>
